<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: shuan
  Date: 2017/01/18
  Time: 18:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="计划停机列表"/>
</jsp:include>
<link rel='stylesheet' href='/css/flatpickr.min.css'/>
<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<style>
    .change-width{
        width: 180px !important;
    }
</style>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.tenant.setting.plan.downtime"/></h4>
        <a id="setting" class="btn btn-add" data-toggle="modal" data-target="#myModal"
           style="margin-left:84px;">
            <i class="fa fa-plus" style="margin-right: 3px"></i><spring:message code="label.tenant.plan.downtime.set"/>
        </a>
    </section>
    <section class="content">
        <div class="box box-primary table-header-line">
            <div class="box-body" style="padding: 0">
                <input class="hidden" id="deviceId" value="${deviceId}"/>
                <table class="table" id="plan_downtime_list">
                    <thead>
                    <tr>
                        <th><spring:message code="label.device.id"/></th>
                        <th><spring:message code="label.tenant.effective.start-stop.time"/></th>
                        <th><spring:message code="label.tenant.create.time"/></th>
                        <th><spring:message code="label.operation"/></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <%--</div>--%>
    </section>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop="false" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">
                        <spring:message code="label.tenant.setting.plan.downtime"/>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="background-color: #fff">
                        <div style="margin-bottom: 10px;">
                            <div class="pull-left" style="margin-bottom: 10px;">
                                <scan><spring:message code="label.tenant.shift.effective.start.date"/>:</scan>
                                <div class="sie-calendar-parent">
                                    <input type="text" name='timepicker' class="form-control sie-calendar-input change-width" id="start_time">
                                    <img src="/images/calendar.png" class="sie-calendar-img"/>
                                </div>
                            </div>
                            <div class="pull-right" style="margin-bottom: 10px;">
                                <scan><spring:message code="label.tenant.shift.effective.end.date"/>:</scan>
                                <div class="sie-calendar-parent">
                                    <input type="text" name='timepicker' class="form-control sie-calendar-input change-width" id="end_time">
                                    <img src="/images/calendar.png" class="sie-calendar-img"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="text-align: center">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="label.cancel"/>
                    </button>
                    <button id="create" type="button" class="btn btn-primary">
                        <spring:message code="label.admin.confirm"/>
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script src="/js/flatpickr.min.js"></script>
<script>
    var startTimeFlat = $('#start_time').flatpickr({
        enableTime: true,
        altInput: true,
        minDate:new Date(),
        minuteIncrement:1,
        altFormat: "Y-m-j H:i:S",
        onChange:function(selectedDates, dateStr, instance){
            endTimeFlat.set("minDate",dateStr);
            endTimeFlat.set("maxDate",dateStr);
        }
    });

    var endTimeFlat = $('#end_time').flatpickr({
        enableTime: true,
        altInput: true,
        minDate:new Date(),
        minuteIncrement:1,
        altFormat: "Y-m-j H:i:S"
    });

    $(document).ready(function () {
        var table = $('#plan_downtime_list').DataTable({
            "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer dataTable-footer-padding"<"pull-left"i><"pull-right"p>>',
            paging: true,
            lengthChange: false,
            ordering: true,
            autoWidth: false,
            info: true,
            serverSide: false,
            fixedHeader: true,
            searching: true,
            aLengthMenu: [15],
            ajax: {
                url: '/partner/{tenant}/api/v1/planDowntime/list'.replace("{tenant}", getKeyByUrl()),
                data: {
                    deviceId: $("#deviceId").val()
                },
                dataSrc: 'data'
            },
            columns: [
                {
                    data: 'device_unique_id'
                },
                {
                    data: 'start_time',
                    "render": function (data, type, full, meta) {
                        return full.start_time + " - " + full.end_time;
                    }
                },
                {
                    data: 'create_time'
                },
                {
                    data:'device_id',
                    "render":function(data,type,full,meta){
                        if(full.start_time < dateTimeFormat(new Date())){
                            return " ";
                        }else {
                            var divString = '<div class="sie-btn-group" style="text-align: center">' +
                                    '<a href="javascript:;" onclick="deleteEvent(this)" data-id="'+ full.device_id +'" data-start="'+ full.start_time +'" data-end="'+ full.end_time +'" style="margin-left: 20px"><i class="sie-btn-delete"></i><span><spring:message code="label.user.delete"/></span></a></div>';
                            return divString;
                        }
                    }
                }
            ],
            "language": {url: '/lang/datatable.chs.json'}
        });
        $('#inputSuccess2').bind('keyup', function (e) {
            table.search(this.value).draw();
        });

        $("#cancel").click(function(){
            startTimeFlat.setDate(" ");
            endTimeFlat.setDate(" ");
        });

        $("#create").click(function(){
            if ($("#start_time").val() == null || $("#start_time").val() == '') {
                swal('<spring:message code="label.tenant.please.choice.effective.start.date"/>', "", "warning");
                return;
            }
            if ($("#end_time").val() == null || $("#end_time").val() == '') {
                swal('<spring:message code="label.tenant.please.choice.effective.end.date"/>', "", "warning");
                return;
            }
            if ($("#end_time").val() <= $("#end_time").val() == '') {
                swal('<spring:message code="label.tenant.please.choice.effective.date"/>', "", "warning");
                return;
            }

            $.ajax({
                url: "/partner/{tenant}/api/v1/planDowntime/add".replace("{tenant}", getKeyByUrl()),
                type:"post",
                data:JSON.stringify({
                    deviceId: $("#deviceId").val(),
                    startTime: $('#start_time').val()+":00",
                    endTime: $('#end_time').val()+":00"
                }),
                contentType:"application/json;charset=utf-8",
                success:function(data){
                    $("#myModal").modal('hide');
                    startTimeFlat.setDate(" ");
                    endTimeFlat.setDate(" ");
                    swal({
                        title: '<spring:message code="label.add.success"/>',
                        text: ' ',
                        type: "success",
                        showConfirmButton: "true",
                        animation: "slide-from-top",
                        confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                    }, function () {
                        $('#plan_downtime_list').DataTable().ajax.reload();
                    });
                },
                error:function(e){
                    $("#myModal").modal('hide');
                    console.log(e);
                    swal("Error!","","error");
                }
            })
        });
    });

    function deleteEvent(param){
        swal({
            title: '<spring:message code="label.user.delete"/>',
            text: '<spring:message code="label.sure.delete"/>',
            type: "warning",
            showCancelButton: "true",
            showConfirmButton: "true",
            confirmButtonText: '<spring:message code="label.admin.confirm"/>',
            cancelButtonText: '<spring:message code="label.cancel"/>',
            animation: "slide-from-top"
        }, function () {
            $.ajax({
                type: "post",
                url: "/partner/{tenant}/api/v1/planDowntime/delete".replace("{tenant}", getKeyByUrl()),
                data: JSON.stringify({
                    deviceId : $("#deviceId").val(),
                    startTime : $(param).data("start"),
                    endTime : $(param).data("end")
                }),
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    if (data.data !== null && data.data != "" && data.data != undefined) {
                        alert(data.data);
                    }

                    var table = $('#plan_downtime_list').DataTable();
                    table.ajax.reload();
                },
                error: function (e) {
                    console.log(e);
                    swal("Error!", "", "error");
                }
            });
        });
    }
</script>